<template>
    <div class="business-wrap-classify">
        <div class="search-area">
            <div class="search-box">
                <div @click="handleToSearch" class="search-input">
                    <img class="search-icon" :src="searchIcon" alt="">
                    <div class="search-text">输入商品名称或类目</div>
                </div>
            </div>
        </div>


        <div class="content">
            <div class="sidebar">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item v-for="item, index in sidebar" :key="index" :title="item.name"
                        @click="handleSidebarChange(item)" />
                </van-sidebar>
            </div>
            <div class="cate_list">

                <van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
                    @load="ajaxGoodList" :immediate-check="false">

                    <div v-if="finished && !list.length" class="empty-good">
                        <van-empty description="暂无商品" />
                    </div>

                    <!-- 商品列表 -->
                    <div class="good-shop-uls">
                        <div v-for="item, index in list" :key="index" class="good-shop-li">
                            <div class="good-li-top">
                                <div class="good-li-top-title">
                                    <img class="good-img" :src="item.cover_url">
                                    <div>{{item.name}}</div>
                                </div>
                                <div class="good-li-top-enter" @click="handleToDetail(item)">进店</div>
                            </div>
                            <div class="good-li-bottom">
                                <div class="good-img-box" v-for="goods in item.goods_list.slice(0, 3)" :key="goods.id" @click="handleToGoodDetail(goods.id)">
                                    <img class="good-bottom-img" :src="goods.cover_url">
                                    <div class="good-bottom-price">¥{{ goods.price }}</div>
                                </div>

                            </div>
                        </div>
                    </div>

                </van-list>
            </div>
        </div>

        <footTab :current="3"></footTab>
    </div>
</template>

<script>
import footTab from '@/components/foot-tab';
import { searchIcon } from '@/tool/static-img';
import { BRAND_CATE_INFO, BRAND_CATE_LIST } from '@/api/home';

export default {
    components: {
        footTab,
    },
    data() {
        return {
            searchIcon,
            // 分页
            page: 1,
            pageSize: 10,
            list: [],
            loadingPage: false,
            finished: false,
            activeKey: 0,
            tabCurrent: 0,
            current: 0, // 当前选中的banner索引

            sidebar: [],
            cate_id: null,
            banners: [],
            recommendGoods: []
        }
    },
    activated() {
        document.title = '品牌馆';
    },
    mounted() {
        this.getSidebarData()
    },
    methods: {
        // 去搜索页
        handleToSearch() {
            this.$router.push({
                name: 'search'
            })
        },
       
        // 去商家详情页
        handleToDetail(item) {
            this.$router.push({
                name: 'shopDetail',
                query: {
                    id: item.id,
                    name: item.name,
                }
            })
        },
        // 去商品详情页
        handleToGoodDetail(id) {
            localStorage.setItem('goodmsg', 1)
            this.$router.push({
                name: 'good',
                query: {
                    id: id
                }
            })
        },
        //获取分类数据
        getSidebarData() {
            this.$http.get(BRAND_CATE_LIST )
                .then(res => {
                    const { data } = res;
                    this.sidebar = data.items;
                    if (this.sidebar && this.sidebar.length > 0) {
                        this.cate_id = this.sidebar[0].id;
                        this.activeKey = 0;
                        this.resetInit();
                    } else {
                        this.list = [];
                        this.finished = true;
                        this.loadingPage = false;
                    }
                })
        },

        //侧边栏切换
        handleSidebarChange(e) {
            this.cate_id = e.id
            this.resetInit()
        },

        resetInit() { //重置
            this.page = 1;
            this.list = [];
            this.finished = false;
            this.loadingPage = true;
            this.ajaxGoodList()
        },

        // 商品列表请求
        ajaxGoodList() {
            if (!this.cate_id) {
                this.loadingPage = false;
                this.finished = true;
                return;
            }
            
            this.$http.get(BRAND_CATE_INFO + this.cate_id)
                .then(res => {
                    const  list  = res.data.brands;

                    if (list && list.length) {
                        this.page++;
                        this.list = this.list.concat(list);
                        // 加载状态结束
                        this.loadingPage = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                        this.loadingPage = false;
                    }
                })
        },
        //详情
        handleToItem(id) {
            localStorage.setItem('goodmsg', 1)
            this.$router.push({
                name: 'good',
                query: {
                    id: id
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.business-wrap-classify {
    min-height: 100vh;
    background-color: #fff;
    padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    box-sizing: border-box;

    .van-sidebar-item--select::before {
        height: .6rem;
        background: #56AE48;
        border-radius: .04rem;

    }

    .van-sidebar-item--select {
        color: #56AE48;
    }

    .search-area {
        display: flex;
        align-items: center;
        width: 100%;
        height: 0.88rem;
        // padding-top: 0.2rem;
        box-sizing: border-box;
        background-size: cover !important;
        background-color: #fff;
        position: fixed;
        z-index: 10;

        .search-box {
            display: flex;
            align-items: center;
            width: 95%;
            height: 0.64rem;
            margin: auto;

            .search-input {
                position: relative;
                display: flex;
                align-items: center;
                width: 100%;
                height: 0.64rem;
                border-radius: 0.42rem;
                background-color: #F4F4F4;

                .search-icon {
                    width: 0.32rem;
                    height: 0.32rem;
                    margin-left: 0.28rem;
                    margin-right: 0.16rem;
                }

                .search-text {
                    height: 0.4rem;
                    line-height: 0.4rem;
                    font-weight: 400;
                    font-size: 0.28rem;
                    color: #c3c3c3;
                }
            }
        }
    }



    .content {
        display: flex;
        justify-content: flex-end;
        background: #fff;
        // padding-top: 2.45rem; 

        .sidebar {
            width: 26%;
            height: calc(100vh - 1.04rem);
            background-color: #f7f8fa;
            position: fixed;
            left: 0;
            top: 1.04rem;
            text-align: center;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        // 自定义滚动条样式 - Webkit浏览器(Chrome, Safari)
        .sidebar::-webkit-scrollbar {
            width: 3px; // 滚动条宽度
        }

        // 滚动条轨道
        .sidebar::-webkit-scrollbar-track {
            background: #f1f1f1; // 轨道背景色
            border-radius: 3px;
        }

        // 滚动条滑块
        .sidebar::-webkit-scrollbar-thumb {
            background: #f1f1f1; // 滑块颜色
            border-radius: 3px;
        }

        // 鼠标悬停时的滑块样式
        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #f1f1f1; // 悬停时的滑块颜色
        }

        .van-sidebar {
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        .van-sidebar-item {
            padding: .26rem 0;
            font-family: 'PingFang SC Medium', 'PingFang SC', sans-serif;
        }

        .sidebar::-webkit-scrollbar {
            display: none;
        }

        .cate_list {
            width: 74%;
        }
    }
    .empty-good{
        margin-top: 35%
    }

    .good-uls {
        width: 100%;
        // padding: 1rem .24rem 0 .24rem;
        box-sizing: border-box;

        .good-ul-li {
            box-sizing: border-box;
            width: 94%;
            // width: 5.12rem;
            height: 1.7rem;
            display: flex;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
            border-bottom: 1px solid #F5F5F5;
            margin: 0.2rem;
            background-color: pink;

            .good-li-left {
                width: 24%;
                height: 100%;
                padding: 0 .06rem;
                border-radius: .12rem;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #FAFAFA;

                .good-img {
                    width: 1.2rem;
                    height: 1.2rem;
                    border: 1px solid #EEEEEE;
                    border-radius: .04rem;
                }
            }

            .good-li-right {
                width: 76%;
                display: flex;
                flex-direction: column;
                padding-top: 0.08rem;
                padding-left: 0.2rem;

                .good-li-title {
                    height: 0.4rem;
                    line-height: 0.4rem;
                    margin-bottom: .12rem;
                    font-weight: 400;
                    font-size: 0.28rem;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .good-info-num {
                    width: fit-content;
                    border-radius: .06rem;
                    border: 1px solid #31A653;
                    font-family: PingFangSC, PingFang SC;
                    margin-bottom: .32rem;
                    font-weight: 400;
                    font-size: .22rem;
                    padding: 0 .12rem;
                    color: #31A653;
                }

                .good-li-money {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-weight: 500;
                    line-height: .44rem;
                    font-size: .32rem;
                    color: #FD1A1A;

                    .icon-jia {
                        width: .36rem;
                        height: .36rem;
                    }
                }
            }
        }

        .good-ul-li:first-child {
            margin-top: 1.04rem;
        }

        .good-ul-li:last-child {
            border-bottom: none;
        }
    }

    .good-shop-uls {
        width: 100%;
        box-sizing: border-box;

        .good-shop-li {
            box-sizing: border-box;
            width: 94%;
            height: 2.56rem;
            display: flex;
            flex-direction: column;
            padding: 0.16rem;
            margin: 0 0.2rem 0.2rem;
            background-color: #F2F4F5;
            border-radius: .12rem;

            .good-li-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 0.16rem;

                .good-li-top-title {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: 500;
                    font-size: .24rem;
                    color: #333333;
                    line-height: .32rem;

                    .good-img {
                        width: 0.52rem;
                        height: 0.52rem;
                        border-radius: .04rem;
                        margin-right: 0.12rem;
                    }
                }

                .good-li-top-enter {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: .92rem;
                    height: .4rem;
                    background: linear-gradient(136deg, #6EC069 0%, #42A633 100%);
                    border-radius: .24rem;
                    font-size: 0.22rem;
                    color: #FFFFFF;
                    margin-right: 0.08rem;
                }
            }

            .good-li-bottom {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 0.16rem;
                .good-img-box {
                    position: relative;
                    .good-bottom-img {
                        width: 1.52rem;
                        height: 1.52rem;
                        border-radius: .08rem;
                        
                    }
                    .good-bottom-price {
                        position: absolute;
                        bottom: 0.06rem;
                        left: 0;
                        width: 100%;
                        height: 0.32rem;
                        font-weight: 500;
                        font-size: .22rem;
                        color: #FFFFFF;
                        line-height: .32rem;
                        padding: 0 .08rem;
                        background-color: rgba(0, 0, 0, 0.4);
                        box-sizing: border-box;
                        border-radius: 0 0 .08rem .08rem;
                    }
                }

                
            }
        }

        .good-shop-li:first-child {
            margin-top: 1.04rem;
        }

        .good-shop-li:last-child {
            border-bottom: none;
        }
    }
}
</style>